Skip to content

jq-05 ajax 自定义jquery插件

一、ajax

ajax的优势和不足: ● 优势: 1. 不需要插件支持 2. 优秀的用户体验 3. 提高 web 程序的性能 4. 减轻服务器和带宽的负担 ● 不足:
1. 破坏浏览器前进、后退按钮的正常功能 2. 对搜索引擎的支持不足

  1. $.ajax({}),括号内容填写一个对象;里面写参数

常用参数:

js
$.ajax({
    url: "", // 请求的地址
    type: "", // 请求的方式(get/post),默认为 get
    cache: false, // 给链接加缓存
    async: ""    //是否异步
    timeout: "" // 设置请求超时时间,单位毫秒
    data: "", // 发送到后端的数据
    dataType: "", // 预期服务器返回的数据类型,有 xml, html, script,json, jsonp,text
    success: function(data) {}, // 成功的回调
    error: function(err) {}, // 失败的回调
    complete: function() {}, // 请求完成后调用的函数,请求成功或失败均调用
    global: true // 是否触发全局的 ajax 事件,默认为 true
});
  1. $.get();

$.get(url,{},function(){},type);

第一个参数:url地址;

第二个参数:向后台发送的数据;

第三个参数:成功的处理函数;需要一个形参用来接收,第二个形参是状态status;

第四个参数:返回类型,一般是json;

以get方式传递数据,只能处理成功的信息,想要处理失败的信息需要使用$.ajax();

  1. $.post();
js
$.post(url,{},function(){},type);
  1. get 请求和 post 请求的区别 (1)get 请求参数跟在 URL 后进行传递,而 post 请求则是作为 HTTP 消息的实体内容发送给 WEB 服务器。当然,在 ajax 请求中,这种区别对用户是不可见的。

     (2)get 请求方式对传输的数据有大小限制(通常不能大于 2KB),而使用 post 方式传递的数据量要比 get 方式大得多(理论上不受限制)。
     
     (3)get 方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,get方式会带来严重的安全性问题,而 post 方式相对来说可以避免这些问题。
     
     (4)get 方式和 post 方式传递的数据在服务器端获取也不相同。在 php 中,get 方式的数据可以用 $_GET[] 获取,而 post 方式可以用 $_POST[] 获取。两种方式都可以用 $_REQUEST[] 来获取。
    
  2. .load(url,[data],[callback]);

将服务器的数据或其他文件的内容加载到调用元素的内容中,如果调用的元素不存在,则不会调用;

常用于加载页面的一个片段,放的一个空标签,往里面填写内容;

url插入地址,callback方法完成后所执行的函数名称;

url地址也可以紧跟空格后写jQuery选择器:$("div").load("1.txt #demo");另一个文件中除了这个选择器外的内容被抛弃;

异步5秒刷新:

js
setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

二、jQuery中的jsonp

jsonp 是 jQuery 中的跨域处理;

  1. 跨域

跨域概念:a.cn 下面的 js 不能调用 b.cn 中的js。因为 a.cn 和 b.cn是不同域,所以跨域就出现了。

同域的概念:域名、端口、协议相同。

  1. jQuery 的 jsonp 如何发起跨域请求及其原理

先准备两个环境:

我们一个用京东的:https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1

另一个用我们本地的环境,这样两个就会产生跨域,直接发起 ajax 请求,如下图 , 浏览器会发出警告

js
var url = ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1’;
$.ajax({
    url: url,
    success: function(data) {
        console.log(data);
    },
    error: function(e) {
        console.log(e);
    }
});

image 3. jsonp方式及其原理解析;

js
// 请求的 url 地址
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
// 创建一个全局函数
function showData(data) {
    console.log(data);
};
$(function() {
// 点击时,在 head 中创建一个 script 标签,标签的 src 即我们要跨域的地址,后面跟上 &callback=showData
    $('button').click(function() {
        $(‘head’).append(`<script src="${url}&callback=showData"><\/script>`);
    })
});

注意:script标签的反斜杠需要转义;

利用script标签可以引用线上script的js文件,没有跨域的限制,当获取跨域数据时,添加一个script标签来跨域请求,地址后面需要带一个callback函数,用来包裹请求到的数据;数据返回到前端后,就是showData(data) 的形式,因为是 script 脚本,所以自动调用全局的 showData 函数,而data 就是 showData 的参数。

这种方式比较麻烦,需要自己写脚本发起请求,然后写个回调函数处理数据,不是很方便。

  1. jQuery 的 jsonp 方式跨域请求

    在 jQuery 中,只需配置一个 dataType:'jsonp',就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为 jsonp 格式,可以看发起的请求路径,自动带了一个callback=xxx,xxx 是 jQuery 随机生成的一个回调函数名称。

    注意:jsonp 方式不支持 POST 方式跨域请求,就算指定成 POST 方式,会自动转为 GET 方式;而后端如果设置成 POST 方式了,那就请求不了了;

三、数据串连化

我们用 serialize() 方法和 serializeArray() 两个方法来序列化元素

格式:

表单 form.serialize();

表单 form.serializeArray();
html
<form>
    <input type=”text” name=”a” value=”1”>
    <input type=”text” name=”b” value=”2”>
    <input type=”text” name=”c” value=”3”>
</form>
  1. $(‘form’).serialize() 返回的是 a=1&b=2&c=3,它其实是把 name 值和 value值用等号连接成一组,用 & 再把每个组连接起来,这样,一个表单的数据,可以很方便的发送给后端。
  2. $(‘form’).serializeArray() 返回的是一个数组数组里的每一项是一个对象,对象里有 name 和 value 两个属性,分别对应 input 的 name 和 value。返回值:[{ name : 'a' , value : '1' },{ name : 'b' , value : '2' },{ name: 'c' , value : '3' }]

四、跨域

跨域问题:a.cn去请求b.cn;

解决跨域三种方法:

  1. 代理:让服务器代理请求;
  2. XHR2(XMLHTTPREQUESTLevel2)IE10不支持;
  3. jsonP;

jsonP原理:利用script标签中没有跨域的限制,所以将要请求的地址放到script标签的src中,同时在请求的地址后面添加一个回调函数(&callback=aa),这个aa是自定义一个函数的作用,就是去包裹请求回来的数据,需要在aa函数中写一个形参用来接收请求到的数据;

在使用$.ajax()中,需要在对象里填写dataType,指定值jsonP,回调函数默认使用success函数;

一般用第一种和第三种;

注意:jsonp 方式不支持 POST 方式跨域请求,就算指定成 POST 方式,会自动转为 GET 方式;而后端如果设置成 POST 方式了,那就请求不了了;

五、validate

  1. 操作方法

一款基于jquery用于验证表单的插件,使用前需要引入jquery文件;

内置验证规则,支持自定义验证规则,简单强大的验证信息提示;

下载地址:https://jqueryvalidation.org/

下载好之后找到解压文件里面的dist/jquery.validate.js,和dist/localization/messages_zh.js;导出这两个文件,并引入;

  1. $("form").validate();接收的是一个对象;对象的值:

rules:验证规则,值是一个对象,填写需要验证的内容,里面的键名是form表单的name名;

如果只是简单的规则required这些也可以直接写到标签的class类名里面;

单选项作为键名写到函数对象中,需要写true;

对于radio、checkbox、select选项,需要设置相同的name;

debug : true;表单不提交,进行调试;

messages:提示信息,一个对象,可以修改rule验证的每一项提示信息;键名对应rules的键名,键值填写提示信息;

submitHandler:是一个函数,用来验证成功执行的函数;用于提交事件,form.submit();

常用的属性:

required 必须输入;

equalTo:"#field" 密码必须一样;

(1) required:true 必输字段

(2) remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值

(3) email:true 必须输入正确格式的电子邮件

(4) url:true 必须输入正确格式的网址

(5) date:true 必须输入正确格式的日期,日期校验ie6出错,慎用

(6) dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性

(7) number:true 必须输入合法的数字(负数,小数)

(8) digits:true 必须输入整数

(9) creditcard:true 必须输入合法的信用卡号

(10) equalTo:"#password" 输入值必须和#password相同

(11) accept: 输入拥有合法后缀名的字符串(上传文件的后缀)

(12) maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13) minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15) range:[5,10] 输入值必须介于 5 和 10 之间

(16) max:5 输入值不能大于5

(17) min:10 输入值不能小于10

  1. 美化提示文字;validate的属性名;

(1)errorClass:错误时使用的class类名;默认是error;

(2)errorElement:包裹错误文字的标签;默认是label;

(3)success:成功执行的操作,在标签验证通过时触发;

值可以填写一个字符串,这个字符串是一成功的class类名,

也可以填写一个函数,需要传一个形参,函数形参指向成功的标签;

(4)showErrors:验证出错执行的函数;

两个形参,第一个形参指向提示信息对象,第二个形参是一个数组,数组中包含所有验证出错的表单;

函数里面必须填写this.defaultShowErrors()方法;否则看不到提示文字;

因为如果输入错误之后,成功的类名不会删除,所以需要使用这一步删除下一个标签的类名;

(5)errorPlacement:错误元素放置的位置

两个形参(error,element),第一个形参指向错误标签;第二个形参指向错误表单;

默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

  1. 将错误信息放置到统一的容器显示:

(1)errorContainer:显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,需要用到将错误信息统一放置的时候使用,值为容器,

(2)errorLabelContainer:把错误信息统一放在一个容器里;jquery选择器;

(3)wrapper:用什么标签再把上边的errorElement包起来;

一般这三个属性同时使用:

js
errorContainer: "div.container",
errorLabelContainer: $("div.container ul"),
wrapper: "li"
  1. 设置validate默认值;
js
$.validator.setDefaults({
    submitHandler:function(){
        alert("提交事件");
});
  1. 自定义添加验证规则

$.validator.addMethod(name,method,message);

name:规则名字,message:输入错误提示信息;

method:是一个函数,三个形参:value,element,pram;

函数里面写一个正则,之后用正则来验证value并返回

return reg.test(value);

自定义一个密码验证规则:

js
$.validator.addMethod("passd",function(value){
    var reg=/^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,}$/;
    return reg.test(value);
},"密码至少6-32位,且包含数字、字母、符号")

六、cookie插件

下载地址:https://github.com/carhartl/jquery-cookie

cookie插件是基于jquery的cookie插件,使用时必须同时引入jquery文件;

  1. 设置

设置:$.cookie(名,值);

设置有过期时间:$.cookie(名,值,{expires:7});

设置路径:$.cookie(名,值,{expires:7,path:"/"});/放在根目录;

  1. 获取:

$.cookie(名);传入一个名,返回值;

当传入没有的名时,返回undefined;

当不传入参数的时候,返回一个对象;

  1. 删除

$.removeCookie(名);删除;

当有值时,删除返回true,当传入的名没有时,返回false;

当删除一个带路径的,需要把路径也加上,加入路径需要写一个对象;

$.removeCookie("name",{path:"/"});

七、自定义插件

  1. 基于对象的插件;

$.fn.extend({}),在对象里面写插件;键名键值的方式写函数,取方法时直接点调用;

为了能在函数里面写$符,需要写一个闭包,括号外面写一个

注:写方法时为了能够链式调用需要加个return返回出去;

  1. 全局插件

$.extend({}),全局调用:$.方法();

.selector可以和.context一起使用,确定查询的选择器,不是方法,不需要加小括号;

.selector返回选择器里面填写的内容;

在将自定义的方法函数放在js文件时,可以在前后都添加一个分号,避免压缩时出错;

八、使用别人的插件

  1. 去网上搜,下载,下载后的文件,一般都是一个压缩包,也可以是一个文件夹;
  2. 引入下载后的css文件;
  3. 引入下载后的js文件;
  4. 使用f12找到需要的板块,之后复制class类名,查看页面源代码,搜索复制的class类名,复制html中的结构的代码;
  5. 复制html中实现功能的代码到页面加载的事件中; 一般情况在使用插件的时候,测试的时候,先把这个代码直接复制到一个div(一个标签),调整整体的大小,位置,样式,然后直接放在自己的页面的某个位置当中,进行使用;

高频面试题

● 怎么解决跨域问题?

● ajax 的缺点?

● ajax 如何实现异步定时 5 秒刷新?

● 页面编码和被请求的资源编码如果不一致如何处理?

● jquery 中 $.get() 提交和 $.post() 提交有区别吗?

● jquery.extend 与 jquery.fn.extend 的区别?

Released under the MIT License.